import React, { FC, useContext } from 'react';
import { View, Text, ScrollView } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { useOrderExhibitionList, fetchorderList } from '@/pages/MyOrder/MyOrderContext';
import ProductCard from '@/pages/components/ProductCard/ProductCard';
import LoadingComponent from '@/pages/MyCollection/LoadingComponent/LoadingComponent';
export interface IProps extends ICompProps {}
WillPayList.defaultProps = {} as Partial<IProps>;
function WillPayList(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('WillPayList', className);
    const { orderExhibitionState, freShListState } = useOrderExhibitionList('unpaid');
    const handlePay = (id, price) => {
        console.log('立即购买。。。');

        // Taro.navigateTo({
        //     url:`pages/PayPage/PayPage?id=${id}&price=${price}`
        // })
    };
    const handleScroll = async () => {
        //请求下页数据
        let res = await fetchorderList({ pageIndex: orderExhibitionState.pageIndex+1, status: 'unpaid' });
        if (!res) return;
        freShListState({ orderList:[...orderExhibitionState.orderList,...res.data],LoadingStatus: 'complete',pageIndex:orderExhibitionState.pageIndex+1})
    };
    return (
        <RootView className={localClassName} style={style} scrollY={true} onScrollToLower={handleScroll}>
            {orderExhibitionState.orderList.map((order) => {
                const { artwork } = order.product;
                return (
                    <ProductCard
                        className="ProductCard"
                        key={order.id}
                        title={artwork.name}
                        subTitle={artwork.intro}
                        imgUrl={artwork.iconUrl}
                        price={order.price}
                        classCard="willPay"
                        isCollection={true}
                        handlePay={() => {
                            handlePay(order.goodsId, order.price);
                        }}></ProductCard>
                );
            })}
            <View className="bottom"><LoadingComponent
                style={{ display: orderExhibitionState.orderList.length > 0 ? 'block' : 'none' }}
                status={orderExhibitionState.LoadingStatus}></LoadingComponent></View>
        </RootView>
    );
}
export default React.memo(WillPayList as FC<IProps>);
const RootView = styled(ScrollView)`
    &.WillPayList {
        margin-top: 48px;
        padding-bottom: 40px;
        .bottom {
            width: 100%;
            height: 150px;
        }
    }
`;
